<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html lang="en">

<head>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet"
	href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link href="css/style.css" rel="stylesheet">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>Agregar Ventas</title>

<!-- Bootstrap Core CSS -->
<link href="bootstrap/vendor/bootstrap/css/bootstrap.css"
	rel="stylesheet">

<!-- Custom Fonts -->
<link href="https://fonts.googleapis.com/css?family=Lato"
	rel="stylesheet">
<link
	href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900"
	rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli"
	rel="stylesheet">

<!-- Plugin CSS -->
<link rel="stylesheet"
	href="bootstrap/vendor/font-awesome/css/font-awesome.css">
<link rel="stylesheet"
	href="bootstrap/vendor/simple-line-icons/css/simple-line-icons.css">

<!-- Theme CSS -->
<link href="bootstrap/css/new-age.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.bootstrap/js/1.4.2/respond.min.js"></script>
    <![endif]-->

<link rel="stylesheet"
	href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	text-overflow: '';
}
</style>

<script>
	$(function() {
		var date = $('#fecha').datepicker({
			dateFormat : 'yy-mm-dd'
		}).val();
	});
</script>

<script>
	function verify() {
		if (document.forms[0].elements['fecha'].value == ''
				|| document.forms[0].elements['inputFactura'].value == '') {
			alert('Complete los campos correctamente.');
			return false;

		}
		else{
			var select = document.getElementById('nuevaLista');
			  for (var i=0; i<select.length; i++) {
				  
				  select.options[i].disabled = false;
			        }
			
		
		}

	}
</script>
<script>
	function today() {
		var today = new Date();
		var dd = today.getDate();
		var mm = today.getMonth() + 1; //January is 0!
		var yyyy = today.getFullYear();

		if (dd < 10) {
			dd = '0' + dd
		}

		if (mm < 10) {
			mm = '0' + mm
		}

		today = yyyy + '-' + mm + '-' + dd;

		document.getElementById("fecha").value = today;

	}
</script>
<script>
	function agregar() {
		
		
		if (document.forms[0].elements['ProductosListCantidad'].value == ''){
			alert('Complete la cantidad.');
			return false;
		}
		
		if ($('#ProductosList').has('option').length == 0) {
			alert('Elegir un producto.');
			return false;
		}
		
		document.getElementById('listasubproductos').style.visibility='visible';
		var a = document.getElementById("ProductosList");
		var b = document.getElementById('ProductosListCantidad').value;

		if (Number(b) <= 0) {
			return false;
		}

		var select = document.getElementById('nuevaLista');
		select.options[select.options.length] = new Option(
				a.options[a.selectedIndex].value + " - " + b,
				a.options[a.selectedIndex].value + " - " + b);
	
		
		
		$('#nuevaLista option:last').prop('selected', true);

	
		
		
		 
		 var selectobject=document.getElementById("mySelect")
		  for (var i=0; i<a.length; i++){
		  if (a.options[i].value == a.options[a.selectedIndex].value )
		     a.remove(i);
		  }
	
		 for (var i=0; i<select.length; i++) {
			  select.options[i].selected = true;
			  select.options[i].disabled = true;
		        }
	
		
		return false;
	}
</script>
</head>

<body id="page-top" onload="today();">

	<nav id="mainNav" class="navbar navbar-default navbar-fixed-top"
		style="color:black; font-weight: bold;">
	<div class="container">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed"
				data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
				<span class="sr-only">Toggle navigation</span> Menu <i
					class="fa fa-bars"></i>
			</button>
			<a class="navbar-brand page-scroll" href="index.jsp">Index</a>
		</div>

		<!-- Collect the nav links, forms, and other content for toggling -->
		<div class="collapse navbar-collapse"
			id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav navbar-right">


				<li><a class="page-scroll" href="AgregarVentaServlet">Agregar
						Venta</a></li>
				<li><a class="page-scroll" href="ConsultarVentasRealizadas">Consultar
						Ventas Realizadas</a></li>


			</ul>
		</div>
		<!-- /.navbar-collapse -->
	</div>
	<!-- /.container-fluid --> </nav>



	<section class="agregarVenta">
	<div class="cta-content">
		<div class="container">
			<c:if test="${UsuarioLogeado.categoria == 'Vendedor'}">

				<c:if test="${not empty MensajeAgregarVenta}">

					<%@ include file="/bootstrap/MensajeSuperior.jsp"%>				
   					${MensajeAgregarVenta}
 				<%@ include file="/bootstrap/MensajeInferior.jsp"%>

				</c:if>

				<form
					action="${pageContext.request.contextPath}/AgregarVentaServlet"
					method="post">
					<div>
						<h1>Agregar Venta</h1>
						<h3>Fecha</h3>
						<input type="text" id="fecha" name="fecha" readonly class="inputs">
						</br> </br>
						<h3>Factura</h3>
						<input type="number" placeholder="Ingrese factura"
							name="inputFactura" min="1" max="90000000000" class="inputs">
						<h3>Empleado</h3>
						<h5>Nombre: ${UsuarioLogeado.nombre} - Apellido:
							${UsuarioLogeado.apellido}</h5>
						<h3>Producto - Cantidad</h3>


						<!-- 	<c:if test="${Productos != null}">
							<c:forEach items="${Productos}" var="Producto">
								<select name="${Producto.productoID}" tabindex="1"
									style="width: 30%;">
									<option
										value="${Producto.productoID} - ${Producto.nombre} - ${Producto.precio}">
										${Producto.nombre} - $${Producto.precio}</option>

								</select>
								<input type="number" name="0${Producto.productoID}" min="1"
									max="900000" style="width: 40px;">
								</br>
								</br>
							</c:forEach>
						</c:if>
						
						onclick="return verify();"
						 -->


						<select  id="ProductosList" size="0" class="inputs">
							<c:if test="${Productos != null}">
								<c:forEach items="${Productos}" var="Producto">

									<option id="productoAgregar"
										value="${Producto.productoID} - ${Producto.nombre} - ${Producto.precio}">
										${Producto.nombre} - $${Producto.precio}</option>


								</c:forEach>
							</c:if>
						</select> <input type="number" id="ProductosListCantidad" min="1"
							max="900000" style="width: 40px;"> <input type="submit"
							name="agregarProducto" value="Agregar"
							onclick="return agregar();">
							
							 </br> </br> 
							 
							 <div  id="listasubproductos" style="visibility:hidden;">
							 
							 	 <select multiple readonly="readonly" id="nuevaLista" name="nuevaLista" class="inputs" style="width:30%;height:50%;"></select>
							 	 </br> </br> <input type="submit" name="btnAgregarProducto"	value="Calcular SubTotal" onclick="return verify();"> 
							 </div>
						
							
							
					



						<c:if test="${SubProductos != null}">
							<table class="table-fill">

								<tr>
									<th colspan="3">
										<h4>Productos</h4>
									</th>
								</tr>
								<tr>
									<td>Producto</td>
									<td>Precio</td>
									<td>Cantidad</td>
								</tr>

								<c:forEach items="${SubProductos}" var="Producto">
									<tr>
										<td>${Producto.nombre}</td>
										<td>$ ${Producto.precio}</td>
										<td>${Producto.cantidad}</td>
									</tr>

								</c:forEach>

							</table>
						</c:if>
						</br> </br> </br>

						<c:if test="${Venta != null}">

							<table class="table-fill">

								<tr>
									<th colspan="3">
										<h4>Total Venta</h4>
									</th>
								</tr>
								<tr>
									<td>Factura</td>
									<td>Fecha</td>
									<td>Precio total</td>


								</tr>


								<tr>
									<td>${Venta.factura}</td>
									<td>${Venta.fecha}</td>
									<td>$ ${Venta.precio_total}</td>


								</tr>



							</table>






						</c:if>
						</br> </br> </br> <input type="submit" name="btnNuevaVenta" value="Guardar Venta"
							onclick="return confirm('Seguro?');"
							<c:if test="${empty Venta}"><c:out value="disabled='disabled'"/></c:if>>




					</div>
				</form>





			</c:if>
			<c:if
				test="${empty UsuarioLogeado || UsuarioLogeado.categoria == 'Recursos Humanos'}">
				<h3>Ingrese con un usuario vendedor para proceder.</h3>
			</c:if>

		</div>
	</div>
	<div class="overlay"></div>
	</section>





	<footer>
	<div class="container">
		<p>&copy; 2016 F. Leandro - TSSI.</p>
		<ul class="list-inline">
			<li><a href="#">TP</a></li>
			<li><a href="#">Prog.</a></li>
			<li><a href="#">II</a></li>
		</ul>
	</div>
	</footer>


	<!-- Bootstrap Core JavaScript -->
	<script src="bootstrap/vendor/bootstrap/js/bootstrap.min.js"></script>

	<!-- Plugin JavaScript -->
	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

	<!-- Theme JavaScript -->
	<script src="bootstrap/js/new-age.min.js"></script>

</body>

</html>
